<template>
    <view class="tarbar">
    		<view class=".tarbar-list" :style="{
                    background: tabBar.backgroundColor,
                    color: tabBar.color,
                    'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
                    'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
                }">
    			<view class="tarbar-list-ul">
    				<view class="tarbar-list-li" :class="item.isShow == true ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list"
    				 :key="index" @click.top="setSelected(index)">
    					<block v-if="item.isShow == false">
    						<view class="tarbar-list-li-icon">
    							<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
    						</view>
    						<view :class="selected == index?'tarbar-list-li-name act':'tarbar-list-li-name'">{{ item.text }}</view>
    					</block>
    					<block v-else>
    						<view style="width: 120rpx;height: 120rpx;" class="tarbar-list-li-icon">
    							<image style="width: 120rpx;height: 120rpx;" :src="item.selectedIconPath" mode=""></image>
    						</view>
    
    					</block>
    				</view>
    			</view>
    		</view>
    	</view>
</template>

<script>
    export default {
        props: ['selected'],
        data() {
            return {
                isshow: 1,
                tabBar: {
                    color: '#333',
                    selectedColor: '#E84351',
                    borderStyle: '#ccc',
                    backgroundColor: '#fff',
                    position: 'bottom',
                    list: [{
                            "pagePath": "/pages/index/index",
                            "iconPath": "/static/image/tabbar/find.png",
                            "selectedIconPath": "/static/image/tabbar/find-s.png",
                            "text": "发单信息",
                            "fontIcon": "icon-shouye",
                            isShow: false,
                        },
    　　　　　　　　　　　　// 这里是要动态切换的栏目，先隐藏，动态追加
                        // {
                        //     "pagePath": "/pages/tabBar/manage/manage",
                        //     "iconPath": "/static/tabBar/home.png",
                        //     "selectedIconPath": "/static/image/tabbar/find.png",
                        //     "text": "管理",
                        //     "fontIcon": "icon-guanli"
                        // },
                        // {
                        //     "pagePath": "/pages/me/manage",
                        //     "iconPath": "/static/image/tabbar/mine.png",
                        //     "selectedIconPath": "/static/image/tabbar/mine-s.png",
                        //     "text": "私域社群",
                        //     "fontIcon": "icon-wode",
                        //     isShow: false,
                        // },
						]
                }
            };
        },
		onLoad() {
		},
        mounted() {
			let role = uni.getStorageSync('role')
			role = 'big'
            // true为判断条件，根据实际的需求替换即可
            if(role === 'big') {
                this.tabBar.list.splice(1,0,
                    {
                        "pagePath": "/pages/talent/publishManage",
                        "iconPath": "/static/image/tabbar/talent.png",
                        "selectedIconPath": "/static/image/tabbar/talent-s.png",
                        "text": "招聘进度",
                        "fontIcon": "icon-guanli",
                        isShow: false,
                    }
                )
            } else{
				this.$set(this.tabBar, 'list', [
					{
					    "pagePath": "/pages/index/index",
					    "iconPath": "/static/image/tabbar/talent.png",
					    "selectedIconPath": "/static/image/tabbar/talent-s.png",
					    "text": "找项目",
					    "fontIcon": "icon-guanli",
					    isShow: false,
					},
					{
					        "pagePath": "/pages/index/home",
					        "iconPath": "/static/image/tabbar/find.png",
					        "selectedIconPath": "/static/image/tabbar/find-s.png",
					        "text": "我的招聘",
					        "fontIcon": "icon-shouye",
					        isShow: false,
					    },
						{
						    "pagePath": "/pages/me/smallMe",
						    "iconPath": "/static/image/tabbar/mine.png",
						    "selectedIconPath": "/static/image/tabbar/mine-s.png",
						    "text": "招聘进度",
						    "fontIcon": "icon-guanli",
						    isShow: false,
						}
				])
				return
				this.tabBar.list[0].text = '公开招聘'
				// this.tabBar.list.unshift({
				//         "pagePath": "/pages/talent/claimList",
				//         "iconPath": "/static/image/tabbar/talent.png",
				//         "selectedIconPath": "/static/image/tabbar/talent-s.png",
				//         "text": "更多信息",
				//         "fontIcon": "icon-guanli",
    //                     isShow: false,
				//     })
				this.tabBar.list.splice(1,1,
				    {
				        "pagePath": "/pages/me/smallMe",
				        "iconPath": "/static/image/tabbar/mine.png",
				        "selectedIconPath": "/static/image/tabbar/mine-s.png",
				        "text": "我的",
				        "fontIcon": "icon-guanli",
                        isShow: false,
				    }
				)
				this.tabBar.list.splice(0,0,
				    {
				        "pagePath": "/pages/talent/claimList",
				        "iconPath": "/static/image/tabbar/talent.png",
				        "selectedIconPath": "/static/image/tabbar/talent-s.png",
				        "text": "更多信息",
				        "fontIcon": "icon-guanli",
				        isShow: false,
				    }
				)
			}
        },
        methods: {
            setSelected(index) {
				console.log(index, this.tabBar.list[index])
　　　　　　　　　　// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
                uni.reLaunch({
                    url: this.tabBar.list[index].pagePath
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
.tarbar {
    width: 100%;
    z-index: 99;
    position: fixed;
}

.tarbar-list {
    width: 100%;
    height: 100upx;
    background: #DFDFDF;
    position: fixed;
    left: 0;
    bottom: 0;
}

.tarbar-list-ul {
    width: 100%;
    height: 100%;
    /* padding-top: 20upx; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
}

.tarbar-list-li {
    /* width: 80upx;
    height: 80upx; */
}

.tarbar-list-li-icon {
    width: 56upx;
    height: 56upx;
    margin: 0 auto;
}

.tarbar-list-li-icon image {
    width: 56upx;
    height: 56upx;
}

.tarbar-list-li-name {
    width: 100%;
    text-align: center;
    line-height: 30upx;
    font-size: 20upx;
    height: 30upx;
}

.act {
    color: #007AFF;
}

.tarbar-list-li-center {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 80rpx;
}

.tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image {
    width: 90upx;
    height: 60upx;
}
</style>